<template>
  <div id="app">
    <!-- <button class="btn btn-primary">按钮</button> -->
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h2 class="text-center">学生信息管理系统</h2>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>入学时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(listData, index) in listDatas" :key="listData.id">
                <td>{{ listData.id }}</td>
                <td>{{ listData.name }}</td>
                <!-- 1.动态绑定class -->
                <td :class="{ markage: listData.age <= 18 }">
                  {{ listData.age }}
                </td>
                <!-- 2.过滤器的使用 -->
                <td>{{ listData.createTime | momentTime("YYYY-MM-DD") }}</td>
                <td>
                  <!-- 阻止默认事件 -->
                  <a href="#" @click.prevent="delFun(index)">删除</a>
                </td>
              </tr>
              <!-- 增加总人数--平均年龄 -->
              <tr>
                <td colspan="2">总人数:</td>
                <td>{{ allCount }}</td>
                <td>平均年龄</td>
                <td>{{ avgAge }}</td>
              </tr>
            </tbody>
            <tfoot v-show="listDatas.length == 0">
              <tr>
                <td colspan="5">没有数据了~~~</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    <!-- 添加数据的内容 -->
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <form>
            <div class="form-group">
              <label for="username">姓名</label>
              <input
                type="text"
                class="form-control"
                id="username"
                placeholder="请输入姓名"
                v-model="stuObj.name"
              />
            </div>
            <!-- v-model的修饰符 -->
            <div class="form-group">
              <label for="age">年龄</label>
              <input
                type="number"
                class="form-control"
                id="age"
                placeholder="请输入年龄"
                v-model.number="stuObj.age"
              />
            </div>
            <!-- 点击事件的同时--会进行刷新提交 -->
            <!-- input-button 普通的button -->
            <button class="btn btn-success" @click.prevent="addBtn">
              添加
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
import moment from "moment";
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      listDatas: [
        { id: 1, name: "李浙1", age: 16, createTime: new Date("2022-10-10") },
        { id: 2, name: "李浙2", age: 17, createTime: new Date("2022-10-10") },
        { id: 3, name: "李浙3", age: 18, createTime: new Date("2022-10-10") },
        { id: 4, name: "李浙4", age: 19, createTime: new Date("2022-10-10") },
        { id: 5, name: "李浙5", age: 20, createTime: new Date("2022-10-10") },
      ],
      stuObj: {
        name: "",
        age: "",
      },
    };
  },
  methods: {
    // 删除
    delFun(index) {
      // 删除数据
      this.listDatas.splice(index, 1);
    },
    // 添加
    addBtn() {
      this.stuObj.id = this.listDatas[this.listDatas.length - 1].id + 1;
      this.stuObj.createTime = new Date();
      // 添加数据
      this.listDatas.push(this.stuObj);
      // 清除input表单中的数据
      this.stuObj = {};
    },
  },
  // 局部过滤器
  filters: {
    momentTime(value, formatMode) {
      return moment(value).format(formatMode);
    },
  },
  // 计算属性
  computed: {
    allCount() {
      return this.listDatas.length;
    },
    avgAge() {
      // 累加reduce(function(total,item),initValue)
      if (this.allCount != 0) {
        // 总年龄数
        var total = this.listDatas.reduce((sum, item) => (sum += item.age), 0);
        console.log(total);
        return Math.round(total / this.allCount);
      } else {
        return 0;
      }
    },
  },
  watch: {
    listDatas: {
      handler() {
        console.log("数据变化了");
        localStorage.setItem("studentDatas", JSON.stringify(this.listDatas));
      },
      // 深度侦听
      deep: true,
      // 直接侦听
      immediate: true,
    },
  },
};
</script>

<style>
.markage {
  color: red;
}
</style>
